<template>
  <div class="community-contain" ref="back_box" v-if="isNotLock">
    <div  class="contain-left" 
      draggable="true"
      @dragstart="dragstartLeft($event)"
      @dragend="dragendLeft($event)"
      :style="`left:${leftElLeft}px;top:${leftElTop}px`"
      v-if="isLeftShow"
    >
      <el-card style="height: 100%;">
        <div slot="header" >
          <h2>社区分类</h2>
        </div>
        <el-menu
          default-active="2" 
        >
          <el-menu-item index="1">
            <i class="el-icon-plus"></i>
            <span slot="title">关注</span>
          </el-menu-item>
          <el-menu-item index="2">
            <i class="el-icon-search"></i>
            <span slot="title">发现</span>
          </el-menu-item>
          <el-menu-item index="3">
            <i class="el-icon-message"></i>
            <span slot="title">求助</span>
          </el-menu-item>
          <el-menu-item index="4">
            <i class="el-icon-document"></i>
            <span slot="title">知识</span>
          </el-menu-item>
          <el-menu-item index="5">
            <i class="el-icon-notebook-1"></i>
            <span slot="title">文库</span>
          </el-menu-item>
          <el-menu-item index="6">
            <i class="el-icon-magic-stick"></i>
            <span slot="title">创意</span>
          </el-menu-item>
        </el-menu>
      </el-card>
    </div>
    <el-button
      class="contain-btn"
      v-else
      :style="`left:${leftElLeft}px;top:${leftElTop}px`"
      @click="showLeftDiv"
    >
      社区分类 <i class="el-icon-arrow-right el-icon--right"></i>
    </el-button>

    <div class="contain-center"
      draggable="true"
      @dragstart="dragstartCenter($event)"
      @dragend="dragendCenter($event)"
      :style="`left:${centerElLeft}px;top:${centerElTop}px`"
      v-if="isCenterShow"
    >
      <el-card style="height: 100%;">
        <div slot="header" style="display: flex;justify-content: space-between;align-items: center;">
          <el-tabs v-model="activeName">
            <el-tab-pane label="推荐" name="first"></el-tab-pane>
            <el-tab-pane label="最新" name="second"></el-tab-pane>
          </el-tabs>
          <div style="display: flex; gap: 10px;">
            <el-input 
              placeholder="搜索帖子..." 
              style="width: 200px;"
            ></el-input>
            <el-button type="primary">搜索</el-button>
          </div>
        </div>
        <el-scrollbar class="posts-list"  style="height: 700px">
          <el-card 
            class="post-item" 
            v-for="post in posts" 
            :key="post.id"
            :style="post.highlightColor ? { 'background-color': post.highlightColor } : {}"
          >
          <div class="post-header">
            <h3 class="post-title" @click="handlePostClick(post.id)">{{ post.title }}</h3>
            <div class="post-meta">
              <span class="author">{{ post.author }}</span>
              <span class="time">{{ post.time }}</span>
              <span class="el-icon-view">{{ post.views }}</span>
              <span class="el-icon-thumb">{{ post.likes }}</span>
            </div>
          </div>
          <div class="post-content">
            <p class="post-summary">{{ post.summary }}</p>
            <img v-if="post.cover" :src="post.cover" alt="帖子封面" class="post-cover">
          </div>
        </el-card>
        </el-scrollbar>
      </el-card>
    </div>
    <el-button
      class="contain-btn"
      v-else
      :style="`left:${centerElLeft}px;top:${centerElTop}px`"
      @click="showCenterDiv"
    >
      社区帖子 <i class="el-icon-arrow-right el-icon--right"></i>
    </el-button>

    <div class="contain-right"
      draggable="true"
      @dragstart="dragstartRight($event)"
      @dragend="dragendRight($event)"
      :style="`right:${rightElRight}px;top:${rightElTop}px`"
      v-if="isRightShow"
    >
      <el-card style="height: 100%;">
        <div slot="header" >
          <h2>热门文章</h2>
        </div>
        <el-scrollbar class="posts-list"  style="height: 700px">
          <el-card 
            class="post-item" 
            v-for="post in posts" 
            :key="post.id"
            :style="post.highlightColor ? { 'background-color': post.highlightColor } : {}"
          >
          <div class="post-header">
            <h3 class="post-title" @click="handlePostClick(post.id)">{{ post.title }}</h3>
            <div class="post-meta">
              <span class="author">{{ post.author }}</span>
              <span class="time">{{ post.time }}</span>
              <span class="el-icon-view">{{ post.views }}</span>
              <span class="el-icon-thumb">{{ post.likes }}</span>
            </div>
          </div>
          <div class="post-content">
            <p class="post-summary">{{ post.summary }}</p>
          </div>
        </el-card>
        </el-scrollbar>
      </el-card>
    </div>
    <el-button
      class="contain-btn"
      v-else
      :style="`right:${rightElRight}px;top:${rightElTop}px`"
      @click="showRightDiv"
    >
      热门帖子 <i class="el-icon-arrow-right el-icon--right"></i>
    </el-button>

    <div class="lock-btn"
      @mousedown="mousedownLock($event)"
      @mousemove="mousemoveLock($event)"
      @mouseup="mouseupLock($event)"
      @mouseleave="mouseupLock($event)"
      @contextmenu="contextmenuLock"
      :style="`right:${lockElRight}px;bottom:${lockElBottom}px`"
    >
      <el-button icon="el-icon-switch-button" circle  size="medium"></el-button>
    </div>
  </div>
  <img src="https://picsum.photos/200/100?random=8" style="width: 100%;height: 100vh;" v-else>
</template>

<script>

export default {
  name: "list",
  data() {
    return {
      initWidth:0,  //父元素的宽-自适应值
      initHeight:0, //父元素的宽-自适应值

      leftStartclientX:0, //元素拖拽前距离浏览器的X轴位置
      leftStartclientY:0, //元素拖拽前距离浏览器的Y轴位置
      leftElLeft:0, //元素的左偏移量
      leftElTop:0,  //元素的上偏移量
      isLeftShow:true,

      activeName: 'first',
      posts: [
        { id: 1, title: "如何高效使用采购管理系统", author: "管理员", time: "2025-07-20", views: 1234, likes: 56, summary: "本文将介绍采购管理系统的高级使用技巧，帮助你提升工作效率...", cover: "https://picsum.photos/200/100?random=1" },
        { id: 2, title: "社区分类功能详解", author: "技术支持", time: "2025-07-18", views: 987, likes: 42, summary: "详细解析社区分类的使用方法和最佳实践，让你的帖子获得更多关注...", cover: "https://picsum.photos/200/100?random=2" },
        { id: 3, title: "采购知识分享：成本控制策略", author: "专家用户", time: "2025-07-15", views: 765, likes: 38, summary: "分享一些实用的采购成本控制策略，帮助企业降低采购成本...", cover: "https://picsum.photos/200/100?random=3" },
        { id: 4, title: "求助：关于招投标模块的问题", author: "新用户", time: "2025-07-12", views: 543, likes: 24, summary: "在使用招投标模块时遇到了一些问题，希望得到社区大神的帮助...", cover: "" },
        { id: 5, title: "创意提案：采购管理系统新功能", author: "高级用户", time: "2025-07-10", views: 432, likes: 31, summary: "我有一些关于采购管理系统新功能的创意，希望能与大家分享和讨论...", cover: "https://picsum.photos/200/100?random=4" },
        { id: 6, title: "知识库：采购流程优化", author: "流程专家", time: "2025-07-08", views: 321, likes: 27, summary: "深入解析采购流程优化的关键点和实施方法，提升采购效率...", cover: "https://picsum.photos/200/100?random=5" },
        { id: 7, title: "文库资源：采购合同模板大全", author: "法律专家", time: "2025-07-05", views: 298, likes: 22, summary: "整理了一套完整的采购合同模板，供大家参考和下载使用...", cover: "https://picsum.photos/200/100?random=6" },
        { id: 8, title: "创意设计：社区界面优化方案", author: "UI设计师", time: "2025-07-03", views: 256, likes: 19, summary: "分享一些社区界面优化的创意和设计方案，提升用户体验...", cover: "https://picsum.photos/200/100?random=7" },
        { id: 9, title: "求助：系统权限设置问题", author: "管理员", time: "2025-07-01", views: 210, likes: 15, summary: "在设置用户权限时遇到了一些问题，希望得到大家的帮助...", cover: "" },
        { id: 10, title: "采购数据分析实战", author: "数据分析师", time: "2025-06-28", views: 187, likes: 14, summary: "通过实际案例讲解如何利用数据分析提升采购决策的科学性...", cover: "https://picsum.photos/200/100?random=8" }
      ],
      centerStartclientX:0, //元素拖拽前距离浏览器的X轴位置
      centerStartclientY:0, //元素拖拽前距离浏览器的Y轴位置
      centerElLeft:0, //元素的左偏移量
      centerElTop:0,  //元素的上偏移量
      isCenterShow:true,

      rightStartclientX:0, //元素拖拽前距离浏览器的X轴位置
      rightStartclientY:0, //元素拖拽前距离浏览器的Y轴位置
      rightElRight:0, //元素的左偏移量
      rightElTop:0,  //元素的上偏移量
      isRightShow:true,

      lockStartclientX:0, //元素拖拽前距离浏览器的X轴位置
      lockStartclientY:0, //元素拖拽前距离浏览器的Y轴位置
      lockElRight:0, //元素的左偏移量
      lockElBottom:0,  //元素的上偏移量
      isDragLock:false,
      initialRight: 0,
      initialBottom: 0,
      buttonSize: 40, // 按钮尺寸，用于边界检测
      isNotLock:true,
    }
  },
  mounted() {
   this.initBodySize()
   // 监听窗口大小变化，更新容器尺寸
   window.addEventListener('resize', this.initBodySize);
   window.addEventListener('keydown', this.handleEscKey)
  },
  beforeDestroy() {
    // 移除事件监听器，防止内存泄漏
    window.removeEventListener('resize', this.initBodySize);
    window.removeEventListener('keydown', this.handleEscKey)
  },
  methods: {
    initBodySize(){
      this.initWidth = this.$refs.back_box.clientWidth;
      this.initHeight = this.initWidth * (1080/1920);
      this.centerElLeft = this.initWidth * 0.3
    },

    dragstartLeft(e){
      e.dataTransfer.setData('text/plain', 'dragging-element');
      this.leftStartclientX = e.clientX; //记录拖拽元素初始位置
      this.leftStartclientY = e.clientY;
    },
    dragendLeft(e){
      let x = e.clientX - this.leftStartclientX;
      let y = e.clientY - this.leftStartclientY;
      this.leftElLeft += x;
      this.leftElTop += y;
      if (this.leftElLeft <= 50 ) {
        this.leftElLeft = 0
        this.isLeftShow = false
      }else if(this.leftElTop <= 50){
        this.leftElTop = 0
        this.isLeftShow = false
      }
    },
    showLeftDiv(){
      this.isLeftShow=true
    },

    handlePostClick(id){
      this.$router.push('/community/detail?id='+id)
    },
    dragstartCenter(e){
      e.dataTransfer.setData('text/plain', 'dragging-element');
      this.centerStartclientX = e.clientX; //记录拖拽元素初始位置
      this.centerStartclientY = e.clientY;
    },
    dragendCenter(e){
      let x = e.clientX - this.centerStartclientX;
      let y = e.clientY - this.centerStartclientY;
      this.centerElLeft += x;
      this.centerElTop += y;
      if(this.centerElTop <= 50){
        this.centerElTop = 0
        this.isCenterShow = false
      }
    },
    showCenterDiv(){
      this.isCenterShow=true
    },

    dragstartRight(e){
      e.dataTransfer.setData('text/plain', 'dragging-element');
      this.rightStartclientX = e.clientX; //记录拖拽元素初始位置
      this.rightStartclientY = e.clientY;
    },
    dragendRight(e){
      let x = e.clientX - this.rightStartclientX;
      let y = e.clientY - this.rightStartclientY;
      this.rightElRight -= x;
      this.rightElTop += y;
      if (this.rightElRight <= 50 ) {
        this.rightElRight = 0
        this.isRightShow = false
      }else if(this.rightElTop <= 50){
        this.rightElTop = 0
        this.isRightShow = false
      }
    },
    showRightDiv(){
      this.isRightShow=true
    },

    mousedownLock(e) {
      // 保留原有属性赋值
      this.lockStartclientX = e.clientX;
      this.lockStartclientY = e.clientY;
      this.isDragLock = true;
      
      // 新增逻辑
      this.initialRight = this.lockElRight;
      this.initialBottom = this.lockElBottom;
      
      // 阻止默认行为，防止选中文字
      e.preventDefault();
      
    },
    mousemoveLock(e) {
      if (!this.isDragLock) return;
      
      // 计算拖拽距离
      const deltaX = e.clientX - this.lockStartclientX;
      const deltaY = e.clientY - this.lockStartclientY;
      
      // 计算新位置
      let newRight = this.initialRight - deltaX;
      let newBottom = this.initialBottom - deltaY;
      
      // 边界检测
      const maxRight = window.innerWidth - this.buttonSize;
      const maxBottom = window.innerHeight - this.buttonSize;
      
      newRight = Math.max(0, Math.min(maxRight, newRight));
      newBottom = Math.max(0, Math.min(maxBottom, newBottom));
      
      // 更新位置
      this.lockElRight = newRight;
      this.lockElBottom = newBottom;
    },
    mouseupLock() {
      if (!this.isDragLock) return;
      
      // 重置拖拽状态
      this.isDragLock = false;
      
    },
    contextmenuLock(){
      this.isNotLock=false
    },
    handleEscKey(event) {
      if (event.key === 'Escape') {
        this.isNotLock = true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.community-contain{
  height: 100vh;
  position: relative;

  .contain-left{
    width: 30%;
    height: 100%;
    background-color: #fff;
    position: absolute;
    user-select: none;
    border-radius: 5px;
  }
  .contain-btn{
    position: absolute;
    user-select: none;
  }
  .contain-center{
    width: 40%;
    position: absolute;
    left:30%;
  }
  .contain-right{
    width: 30%;
    position: absolute;
    right:0;
  }

  .lock-btn{
    position:fixed;
    right: 0;
    bottom:0;
    z-index: 10;
    
    button{
      width: 40px;
      height: 40px;
      background-color: #1890ff;
      color: #fff;
    }
  }
}

::v-deep .el-menu-item:hover{
  color: #1890ff;
  i{
  color: #1890ff;
  }
}
</style>
